<template>
    <el-dialog title="添加收货地址" :visible.sync="receiverVisible" width="670px" :close-on-click-modal="canCloseByModel" :before-close="handleClose">
        <div class="receiverClass">
            <ul>
                <li>
                    <span>
                        <span style="color: red">*</span>
                        <span>所在地区</span>
                    </span>
                    <span>
                        <common-position ref="positionRef" />
                    </span>
                </li>
                <li>
                    <span>
                        <span style="color: red">*</span>
                        <span>收货人</span>
                    </span>
                    <span>
                        <input style="width: 242px" v-model="receiverForm.receiver" @blur="vaildForm('receiver',true)" />
                        <span style="color: red" v-if="receiverFormVaild.receiverErrorMsg">
                            {{receiverFormVaild.receiverErrorMsg}}
                        </span>
                    </span>
                </li>
                <li>
                    <span>
                        <span style="color: red">*</span>
                        <span>详细地址</span>
                    </span>
                    <span>
                        <input style="width: 242px" v-model="receiverForm.position" @blur="vaildForm('position',true)" />
                        <span style="color: red" v-if="receiverFormVaild.positionErrorMsg">
                            {{receiverFormVaild.positionErrorMsg}}
                        </span>
                    </span>
                </li>
                <li>
                    <span>
                        <span style="color: red">*</span>
                        <span>手机号码</span>
                    </span>
                    <span>
                        <input style="width: 30px" value="0086" disabled />
                        -
                        <input style="width: 242px" v-model="receiverForm.phone" @blur="vaildForm('phone',true)" />
                        <span style="color: red" v-if="receiverFormVaild.phoneErrorMsg">
                            {{receiverFormVaild.phoneErrorMsg}}
                        </span>
                    </span>
                </li>
                <li>
                    <span>
                        <span>&nbsp;</span>
                        <span>固定电话</span>
                    </span>
                    <span>
                        <input style="width: 30px" value="0086" disabled />
                        -
                        <input style="width: 242px" v-model="receiverForm.linePhone" @blur="vaildForm('linePhone')" />
                        <span style="color: red" v-if="receiverFormVaild.linePhoneErrorMsg">
                            {{receiverFormVaild.linePhoneErrorMsg}}
                        </span>
                    </span>
                </li>
                <li>
                    <span>
                        <span>&nbsp;</span>
                        <span>邮箱地址</span>
                    </span>
                    <span>
                        <input style="width: 242px" v-model="receiverForm.email" @blur="vaildForm('email')" />
                        <span style="color: red" v-if="receiverFormVaild.emailErrorMsg">
                            {{receiverFormVaild.emailErrorMsg}}
                        </span>
                    </span>
                </li>
                <li>
                    <span>
                        <span>&nbsp;</span>
                        <span>地址别名</span>
                    </span>
                    <span>
                        <input style="width: 242px" v-model="receiverForm.positionNickName" @blur="vaildForm('positionNickName')" />
                        <span style="color: red" v-if="receiverFormVaild.positionNickNameErrorMsg">
                            {{receiverFormVaild.positionNickNameErrorMsg}}
                        </span>
                    </span>
                </li>
                <li>
                    <span class="saveButton" @click="addReceiver" style="width:85px;margin-left:80px;border-radius:3px">保存收货人信息</span>
                </li>
            </ul>
        </div>
    </el-dialog>
</template>
<script lang="ts">
    import { Component, Vue, Emit } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import Position from "@/components/common/position.vue";
    import CustomerApiActions from '@/components/api/customer-api-actions';
    import * as _ from 'lodash'
    @Component({
        components: {
            CommonPosition: Position
        }
    })
    export default class AddReceiverInfo extends Vue {
        public receiverVisible: boolean = true;
        public canCloseByModel = false;
        public positionStr: any = "";
        public receiverForm: any = {
            receiver: '',
            position: '',
            userId: (localStorage.getItem("loginUser") as any).id,
            phone: '',
            linePhone: '',
            email: '',
            positionNickName: ''
        };
        public receiverFormVaild: any = {
            receiverErrorMsg: '',
            positionErrorMsg: '',
            phoneErrorMsg: '',
            linePhoneErrorMsg: '',
            emailErrorMsg: '',
            positionNickNameErrorMsg: ''
        }
        public async created() {

        }
        @Emit("handleClose")
        public handleClose(data: any) {
            return data;
        }
        public async addReceiver() {
            //标红
            for (let key in this.receiverForm) {
                if (key == "receiver" || key == "position" || key == "phone") {
                    this.vaildForm(key, true);
                } else {
                    this.vaildForm(key);
                }
            }
            //阻止提交
            for (let key in this.receiverFormVaild) {
                let errorMsg = this.receiverFormVaild[key];
                if (errorMsg) {
                    return false;
                }
            }
            //添加收货人信息
            let apiActions = new CustomerApiActions(this);
            if (localStorage.getItem("positionStr")) {
                this.positionStr = localStorage.getItem("positionStr");
            }
            let user: any = JSON.parse(localStorage.getItem("loginUser"));
            this.receiverForm.userId = user.id;
            this.receiverForm.position = this.positionStr + this.receiverForm.position;
            await apiActions.addReceiver(this.receiverForm);
            this.handleClose(this.receiverForm);
        }
        //表单校验方法
        public vaildForm(itemName: any, require ? : boolean) {
            this.receiverFormVaild[itemName + "ErrorMsg"] = "";
            if (!this.receiverForm[itemName] && require) {
                this.receiverFormVaild[itemName + "ErrorMsg"] = "必填项不能为空.";
                return false;
            }
            //特殊校验,对电话号码做有效性校验
            if (itemName == "phone" || itemName == "linePhone") {
                let phoneReg = /^[1][3,5,7,8][0-9]{9}$/;
                let phonePass = phoneReg.test(this.receiverForm[itemName]);
                if (itemName == "linePhone") {
                    if (!this.receiverForm[itemName]) {
                        this.receiverFormVaild[itemName + "ErrorMsg"] = "";
                        return false;
                    }
                }
                if (!phonePass) {
                    this.receiverFormVaild[itemName + "ErrorMsg"] = "请输入有效电话号码.";
                }
            }
            //对邮箱做有效性校验
            if (itemName == "email") {
                let emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                let emailPass = emailReg.test(this.receiverForm[itemName]);
                if (!emailPass && this.receiverForm[itemName]) {
                    this.receiverFormVaild[itemName + "ErrorMsg"] = "请输入有效邮箱.";
                }
            }

        }
    }
</script>
<style lang="less">
    .receiverClass {
        #posLabel {
            display: none;
        }

        .addressClass {
            height: 25px;
            padding: 0 5px;
            display: flex;
            align-items: center;

            span {
                display: flex;
                align-items: center;
            }

            b {
                display: flex;
                align-items: center;
            }
        }

        >ul {
            display: flex;
            padding: 0px;
            margin: 0px;
            flex-direction: column;
            height: 100%;
            width: 100%;
            margin-left: 20px;

            >li {
                height: 26px;
                margin-top: 15px;
                list-style-type: none;
                display: flex;
                align-items: center;

                >span:nth-child(1) {
                    width: 80px;

                    input {
                        border: 1px solid #ccc;
                    }
                }

            }
        }

        input {
            outline: none;
            border: 1px solid #ccc;
            height: 25px;
            padding: 0 5px;
        }

        width: 100%;
        background-color: white;
        height: 100%;

        .saveButton {
            height: 25px;
            line-height: 25px;
            background-color: #e74649;
            color: white;
            cursor: pointer;
            font-weight: 400;
            padding: 0 15px;
        }

        ul {
            li {
                font-size: 12px;

                span {
                    font-size: 12px;
                }
            }
        }
    }
</style>